<template>
    <div>
        <div class="row m-b">
            <div class="col-lg-12">
                <a href="###" class="back-link" @click.prevent="$emit('backtodetail')">
                    <i class="fa fa-chevron-left"></i>
                    返回
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3">
                <blockquote>
                    <div>
                        <p class="text-primary inline-block-p">
                            批次详情
                        </p>
                    </div>
                </blockquote>
            </div>
            <div class="col-lg-9 text-right">
                <span><b>投放批次号</b>：{{batch.batch}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span><b>投放时间</b>：{{batch.putin_time}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span><b>投放者</b>：{{batch.appid}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span><b>投放数量/有效URL数量</b>：{{batch.sample_count + '/' + batch.valid_url}}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="search-box">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" placeholder="输入关键字" class="form-control" v-model="detail_kw" @keydown.enter="detailSearch">
                            <span class="input-group-btn" v-if="!detail_searched">
                                <button type="button" class="btn btn-primary" :disabled="detail_searching" @click.prevent="detailSearch">
                                    <i class="fa fa-search fa-fw"></i>
                                    <i class="fa fa-refresh fa-spin fa-fw" v-show="detail_searching"></i>
                                    &nbsp;搜索
                                </button>
                            </span>
                            <span class="input-group-btn" v-if="detail_searched">
                                <button type="button" class="btn btn-primary" @click.prevent="canceldetailSearch">
                                    <i class="fa fa-arrow-left fa-fw"></i>
                                    &nbsp;返回
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <button class="btn btn-primary btn-outline" @click="detailDeliver" v-show="detail_deliver_show==false">批量交付</button>
                <button class="btn btn-white" @click="detail_deliver_show=false" v-show="detail_deliver_show">取消</button>
                <button class="btn btn-success" @click="detailDeliverConf" v-show="detail_deliver_show">确定交付</button>

                <button class="btn btn-primary btn-outline" @click="dlResult">下载结果</button>
                <form :action="dl_action" target="_blank" id="dl-form" method="post">
                    <template v-for="(item,i) in detail_selected_list">
                        <input type="hidden" :value="item" name="req_id[]" :key="i">
                    </template>
                </form>
                <span class="help-block text-warning" v-show="detail_deliver_show&&stata_test">该任务未完成检测，确定交付？</span>
            </div>
            <div class="col-lg-6 form-horizontal">
                <div class="form-group">
                    <label class="col-sm-8 control-label"><span class="text-normal">总计 {{detail_total}} 条数据</span></label>
                    <div class="col-sm-4">
                        <select class="form-control" v-model="detail_ps">
                            <option value="10">每页10条</option>
                            <option value="20">每页20条</option>
                            <option value="50">每页50条</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <TableLoading :shown="detail_loading"></TableLoading>
                <div class="flex-list table-style table-striped-style" :class="{'blur':detail_loading}">
                    <div class="flex-row title-row">
                        <!--<div class="flex-1 flex-col" v-if="have_done_detail">-->
                        <div class="flex-1 flex-col">
                            <input type="checkbox" v-model="selected_all_done" :disabled="detail_deliver_show">
                        </div>
                        <div class="flex-1 flex-col">编号</div>
                        <div class="flex-2 flex-col">URL</div>
                        <div class="flex-3 flex-col">样本hash</div>
                        <div class="flex-1 flex-col">新/旧</div>
                        <div class="flex-1 flex-col">是否广告件</div>
                        <div class="flex-2 flex-col">静态检测进度</div>
                        <div class="flex-2 flex-col">rms检测进度</div>
                        <div class="flex-2 flex-col">人工检测进度</div>
                        <div class="flex-2 flex-col">不规范项数量</div>
                        <div class="flex-2 flex-col">状态码</div>
                        <div class="flex-2 flex-col">交付人</div>
                        <div class="flex-3 flex-col">交付时间</div>
                        <div class="flex-3 flex-col">操作</div>
                    </div>
                    <div class="flex-list-body">
                        <template v-for="(detail,i) in detail_list">
                            <div class="flex-row" :key="detail.id">
                                <!--<div class="flex-1 flex-col" v-if="have_done_detail">-->
                                <div class="flex-1 flex-col">
                                    <input type="checkbox" v-model="detail_selected_list" :value="detail.req_id" :disabled="detail_deliver_show">
                                </div>
                                <div class="flex-1 flex-col">{{getIndex(i)}}</div>
                                <div class="flex-2 flex-col">{{detail.url}}</div>
                                <div class="flex-3 flex-col"><a href="###" @click.prevent="goToHash(detail.sample_hash)">{{detail.sample_hash}}</a></div>
                                <div class="flex-1 flex-col">{{detail.old | oldStr}}</div>
                                <div class="flex-1 flex-col">{{detail.is_adv | advStr}}</div>
                                <div class="flex-2 flex-col">{{detail.static_state | stateStr}}</div>
                                <div class="flex-2 flex-col">{{detail.rms_state | stateStr}}</div>
                                <div class="flex-2 flex-col">{{detail.manual_state | stateStr}}</div>
                                <div class="flex-2 flex-col">{{detail.irregular_count}}</div>
                                <div class="flex-2 flex-col">{{detail.state_code}}</div>
                                <div class="flex-2 flex-col">{{detail.delivery_user}}</div>
                                <div class="flex-3 flex-col">{{detail.delivery_time}}</div>
                                <div class="flex-3 flex-col">
                                    <a href="###" v-if="detail.sample_hash!=''" @click.prevent="resPreview(detail)">结果预览</a>
                                    <a v-if="detail.state=='4'" href="###" @click.prevent="deliverSingle(detail)">交付</a>
                                    <a v-if="detail.state=='5'" href="###" @click.prevent="deliverDetail(detail)">交付详情</a>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="righttab-table-page clearfix" :class="{'blur':detail_loading}">
                    <Paging v-model="detail_pn" :total="detail_total" :ps="detail_ps"></Paging>
                </div>
            </div>
        </div>

        <ResPreviewModal v-show="res_preview_show" :res-preview-obj="res_preview_obj" @close="res_preview_show=false"></ResPreviewModal>
        <ResDetailModal v-show="res_detail_show" :res-detail="res_detail" @close="res_detail_show=false"></ResDetailModal>
    </div>
        
</template>
<script>
    import Modal from './Modal.vue'
    import Paging from './Paging.vue'
    import TableLoading from './TableLoading.vue'
    import ResPreviewModal from './ResPreviewModal.vue'
    import ResDetailModal from './ResDetailModal.vue'
    import {cfg} from '../config/config.js'
    import {
        tip,
        ajax
    } from '../tools/tools.js'

    export default {
        components: {
            Modal,
            Paging,
            TableLoading,
            ResPreviewModal,
            ResDetailModal
        },
        props:{
            batch:{
                type:Object,
                default:{}
            }
        },
        data() {
            return {
                detail_kw:'',
                dl_action:cfg.baseUrl + '/Api.php/Batch/downloadResult',
                detail_searched:false,
                detail_searching:false,

                detail_loading:false,
                detail_pn:1,
                detail_ps:50,
                detail_total:0,
                detail_list:[],

                selected_all_done:false,
                detail_selected_list:[],
                have_done_detail:false,

                detail_deliver_show:false,
                stata_test:false,

                res_preview_show:false,
                res_preview_obj:{},

                res_detail_show:false,
                res_detail:{}
            }
        },
        watch: {
            batch(v,ov){
                var self = this;
                
                if(self.detail_pn==1){
                    var par = {
                        pn:self.detail_pn,
                        ps:self.detail_ps
                    }
                    self.getBatchDetail(par);
                } else {
                    self.detail_pn = 1;
                }
                
            },
            detail_list(v,ov){
                var self = this;
                var num = 0;

                self.selected_all_done = false;
                self.detail_list.map((v,i)=>{
                    if(v.state=='4'){
                        num++;
                    }
                });
                self.have_done_detail = num>0?true:false;
            },
            detail_pn(v, ov) {
                var self = this;
                var par = {
                    pn: self.detail_pn
                }

                if(self.detail_searching==false){
                    self.getBatchDetail(par);
                }
            },
            detail_ps(v,ov){
                var self = this;
                if(self.detail_pn==1){
                    var par = {
                        pn: self.detail_pn
                    }
                    self.getBatchDetail(par);
                } else {
                    self.detail_pn = 1;
                }
            },
            selected_all_done(v,ov){
                var self = this;
                if(v){
                    self.detail_selected_list = [];
                    self.detail_list.map((v,i)=>{
                        self.detail_selected_list.push(v.req_id);
                    });
                } else {
                    self.detail_selected_list = [];
                }
            }
        },
        filters:{
            oldStr(v){
                var obj = {
                    '0':'',
                    '1':'新',
                    '2':'旧'
                }
                return obj[v];
            },
            advStr(v){
                return v=='0'?'否':'是';
            },
            stateStr(v){
                return v=='1'?'完成':'进行中';
            },
            statusStr(v){
                var s = v.state;
                var sObj = {
                    '0':'待分配',
                    '1':'待分析',
                    '2':'待审核',
                    '3':'人工检测完成',
                    '4':'全部检测完成',
                    '5':'交付完成',
                    '9':'审核不通过',
                    '10':'被驳回'
                }

                return sObj[s];
            }
        },
        methods: {
            getBatchDetail(par,innerCb){
                var self = this;
                par.ps = self.detail_ps;
                par.batch = self.batch.batch;
                self.detail_loading = true;
                if(self.batch.batch){
                    ajax.getBatchDetail({
                        param:par,
                        cb(data){
                            self.detail_list = data.data.data;
                            self.detail_total = parseInt(data.data.total);
                            setTimeout(function () {
                                self.detail_loading = false;
                            }, 500)
                            if(innerCb)innerCb(data);
                        }
                    })
                }
                
            },
            getIndex(i) {
                var self = this;
                return i + self.detail_ps * (self.detail_pn - 1) + 1;
            },
            detailSearch(){
                var self = this;

                if($.trim(self.detail_kw).length==0){
                    tip.warn('请输入有效的查询字符');
                    return;
                }

                self.detail_searching = true;
                self.detail_pn = 1;
                var par = {
                    keyword:self.detail_kw,
                    pn:self.detail_pn
                }

                self.getBatchDetail(par,function(){
                    self.detail_searching = false;
                    self.detail_searched = true;
                })
            },
            goToHash(sh){
                var self = this;
                self.$root.SEARCH_SH = sh;
                self.$root.$router.push({
                    name:'analysispage'
                });
            },
            canceldetailSearch(){
                var self = this;
                self.detail_searched = false;
                self.detail_kw = '';
                if(self.detail_pn==1){
                    var par = {
                        pn:self.detail_pn
                    }

                    self.getBatchDetail(par);
                } else {
                    self.detail_pn = 1;
                }
            },
            detailDeliver(){
                var self = this;
                if(self.detail_selected_list.length==0){
                    tip.warn('请选择要交付的项');
                    return
                }

                var notPass = false;
                self.detail_list.map((v)=>{
                    if(self.detail_selected_list.indexOf(v.req_id)!=-1){
                        if(parseInt(v.state)<4){
                            notPass = true;
                        }
                    }
                });             
                self.stata_test - notPass;
                self.detail_deliver_show = true;
            },
            detailDeliverConf(){
                var self = this;
                ajax.delivery({
                    param:{
                        req_id:self.detail_selected_list
                    },
                    cb(data){
                        var par = {pn:self.detail_pn}
                        self.getBatchDetail(par);
                    }
                })
            },
            dlResult(){
                var self = this;
                if(self.detail_selected_list.length==0){
                    tip.warn('请选择要下载的项');
                    return
                }
                var isPass = true;
                self.detail_list.map((v)=>{
                    if(self.detail_selected_list.indexOf(v.req_id)!=-1){
                        if(parseInt(v.state)<=3){
                            isPass = false
                        }
                    }
                })
                if(isPass){
                    document.getElementById('dl-form').submit();
                } else {
                    tip.warn('该样本未检测完成，不能下载')
                }
            },
            resPreview(detail){
                var self = this;
                ajax.batchResultView({
                    param:{
                        sample_hash:detail.sample_hash,
                        req_id:detail.req_id
                    },
                    cb(data){
                        self.res_preview_obj = data.data;
                        self.res_preview_show = true;
                    }
                })
            },
            deliverSingle(detail){
                var self = this;
                if(parseInt(detail.state)>3){
                    if(confirm('确定交付?')){
                        ajax.delivery({
                            param:{
                                req_id:[detail.req_id]
                            },
                            cb(data){
                                var par = {pn:self.detail_pn}
                                self.getBatchDetail(par);
                            }
                        });
                    }
                } else {
                    if(confirm('该任务未完成检测，确定需要交付?')){
                        ajax.delivery({
                            param:{
                                req_id:[detail.req_id]
                            },
                            cb(data){
                                var par = {pn:self.detail_pn}
                                self.getBatchDetail(par);
                            }
                        });
                    }
                }
            },
            deliverDetail(detail){
                var self = this;
                self.res_detail = detail.result_callback?detail.result_callback:{};
                self.res_detail_show = true;
            }
        },
        mounted(){
            var self = this;
            document.addEventListener('keydown',function(e){
            e = window.event || e;
            var keycode = e.keyCode || e.which;
            if (keycode == 116 && self.$route.name=='batchlistpage' && Object.keys(self.batch).length>0) {
                if (window.event) {
                    try { e.keyCode = 0; } catch (e) { }
                    e.returnValue = false;
                } else {
                    e.preventDefault();
                }
                var par = {
                    keyword:self.detail_kw,
                    pn:self.detail_pn
                }

                self.getBatchDetail(par)
            }
        })
        }
    }
</script>
<style scoped>
.back-link{
    font-size: 130%;
    color: #999;
}

.search-box{
    width:300px;
}
    
</style>